<template>
  <div class="vipList">
    <el-breadcrumb style="margin-top: 0;">
      <el-breadcrumb-item>会员管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">会员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="inputjs" style="margin-top: 10px;">
      <span>筛选条件:</span>
      <el-input v-model="input" placeholder="请输入手机号" />
    </div>

    <div style="margin-top: 20px">
      <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
        :header-cell-style="{ background: '#C9DAFF' }">
        <el-table-column type="selection" width="70" />
        <el-table-column label="用户信息">
          <template #default="scope">
            <div class="fk"></div>
            <div class="text">{{ scope.row.info }}</div>

          </template>
        </el-table-column>
        <el-table-column property="telphone" label="手机号" />
        <el-table-column property="num" label="可用余额" />
        <el-table-column property="integral" label="可用积分" />
        <el-table-column label="操作">
          <template #default="scope">
            <span @click="editHandler(scope.row.idr, '编辑')">编辑</span>&nbsp;&nbsp;
            <span>删除</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹出框 -->
      <yellowDialog v-model="dialogVisible" :dialogVisible="dialogVisible" @clickHandler="dialogCancelHandler"
        @dialogOk="dialogOKHandler" />
    </div>
    <el-pagination background layout="prev, pager, next, jumper,sizes" :page-sizes="[5, 10, 20, 30]"
      @update:page-size='pagesize = $event' :page-size="pagesize" :current-page="page"
      @update:current-page="page = $event" :total="total" class="mt-4">
    </el-pagination>
    <div class="pageleft">
      共{{ total }}条记录 第{{ page }}/{{ Math.ceil(total / pagesize) }}页
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElTable } from 'element-plus'
import yellowDialog from '../../components/yellowDialog.vue'

const multipleTableRef = ref()
const multipleSelection = ref([])

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
var dialogVisible = ref(false)
const editHandler = () => {
  dialogVisible.value = true;
}
const dialogCancelHandler = () => {
  dialogVisible.value = false;
}
const dialogOKHandler = () => {
  dialogVisible.value = false;
}
let page=ref(1)
let pagesize=ref(5)
let total=ref(50)
const tableData = [
  {
    info: '张三',
    idr: ' 600123454',
    telphone: '18654265874',
    num: '1000.00',
    integral: 865,

  },
  {
    info: '张三',
    idr: ' 600123455',
    telphone: '18654265874',
    num: '1000.00',
    integral: 865,
  },
  {
    info: '王五',
    idr: ' 600123454',
    telphone: '18654265874',
    num: '1000.00',
    integral: 865,
  },
  {
    info: '张三',
    idr: ' 600123456',
    telphone: '18654265874',
    num: '1000.00',
    integral: 865,
  },
  {
    info: '张三',
    idr: ' 600123457',
    telphone: '18654265874',
    num: '1000.00',
    integral: 865,
  }
]
const input = ref('')
const handleClose = () => { }
</script>

<style lang="scss" scoped>
.vipList {
  width: 1160px;
  margin-left: 20px
}

.bai {
  width: 1161px;
  height: 710px;
  background: #ffffff;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.el-breadcrumb {
  height: 23px;
  //  margin-left: 21px;
  margin-top: 17px;
  font-family: "Abhaya Libre";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 23px;
  /* identical to box height, or 164% */
  color: #999999;
}

.inputjs {
  margin-top: 30px;
  width: 279px;
  height: 20px;
  display: flex;

  span {
    width: 120px;
  }
}

.fk {
  width: 50px;
  height: 50px;
  background-color: #CCCCCC;
  float: left;
}

.text {
  float: right;
  margin-top: 13px;
}

.vipListdialog {
  background-color: aqua;
}
.pageleft {
  margin-top: 15px;
  font-size: 14px;
  float: left;
}
.mt-4 {
  margin-top: 10px;
  float: right;
  margin-right: 7%;
}
</style>